<template>
  <div id="footer-box" class="foot">
      <p style="display: none" v-if="public_info"></p>
      <template v-if="configFooterOpen === '1'">
        <!-- 后台配置的 footer -->
        <div v-html='footerTemplate'></div>
      </template>
      <template v-else>
        <!-- 默认显示的 footer -->
        <div class="default-foot-min">
          <div class="foot-min-top clearfix">
            <div class="foot-min-right">
               <div class="logo">
                 <img :src="logo" alt="">
               </div>
               <div class="copyright">
                 <p class="p">Copyright © 2018～2019 {{name}}. All rights reserved</p>
               </div>
               <div class="phone">
                 <span class="phone_cont">{{$t('myAdd.footItem.support')}}{{number}}</span>
               </div>
               <div class="email clearfix">
                 <span class="email_cont">{{$t('myAdd.footItem.coinListing')}}{{email}}</span>
               </div>
               <div class="foot-right-btm">
                 <ul class="foot-right-btm-list">
                   <li class="list-item"><a href="https://t.me/BizuOfficial" target="_blank"><img class="icon-img" src="@/assets/img/footer/tel2.png" alt=""></a></li>
                   <li class="list-item"><a href="https://www.twitter.com/@bizucom" target="_blank"><img class="icon-img" src="@/assets/img/footer/T.png" alt=""></a></li>
                   <li class="list-item">
                     <a href="javascript:;"><img class="icon-img" src="@/assets/img/footer/wechat.png" alt=""></a>
                     <div class="qrcode">
                       <img src="@/assets/img/wechatcustomer.jpg"  alt="WeChat customer service">
                     </div>
                   </li>
                   <li class="list-item"><a href="https://weibo.com/6584162779/profile?topnav=1&wvr=6&is_all=1" target="_blank"><img class="icon-img" src="@/assets/img/footer/xl.png" alt=""></a></li>
                   <li class="list-item"><a href="https://0.plus/BizuOfficial" target="_blank"><img class="icon-img" src="@/assets/img/footer/by.png" alt=""></a></li>
                 </ul>
               </div>
             </div>
            <div class="foot-min-left clearfix">
              <ul class="footer_item_title">
                <li>{{$t('myAdd.footItem.server')}}</li>
                <li>{{$t('myAdd.footItem.help')}}</li>
                <li>{{$t('myAdd.footItem.law')}}</li>
                <li>{{$t('myAdd.footItem.about')}}</li>
              </ul>
              <ul class="get_data">
                <li v-for="(item,index) in fotdata" :key="index" v-if="fotdata.length > 0" class="uside">
                  <router-link tag="span" :to= "{path:'/cms',query: {id: item.fileName}}">{{item.title}}</router-link>
                </li>
                <!-- 我添加的底部按钮 -->
                <li class="uside"><a href="https://jinshuju.net/f/1bM6Sj" target="_blank">{{$t('myAdd.upcurrency.upcurrencyForcurrency')}}</a></li>
                <li class="uside"><a href="https://github.com/bizukex/API-docs-bizu.com/wiki" target="_blank">{{$t('user.side.apidocd')}}</a></li>
                <template v-if="siteType.length === 1">
                  <template v-if="siteType.indexOf('ex') !== -1">
                    <li class="uside"><router-link tag="span" to="/bideli">{{$t('myAdd.bideli.saveMoneyLive')}}</router-link></li>
                  </template>
                  <template v-if="siteType.indexOf('otc') !== -1">
                    <li class="uside"><a :href="http + webSiteInfo.ex_pc_url + '/bideli'" target="_self">{{$t('myAdd.bideli.saveMoneyLive')}}</a></li>
                  </template>
                </template>
                <template v-else>
                  <li class="uside"><router-link tag="span" to="/bideli">{{$t('myAdd.bideli.saveMoneyLive')}}</router-link></li>
                </template>
                <li class="uside"><router-link tag="span" to="/rate">{{$t('myAdd.rate.title')}}</router-link></li>
                <!-- 以上我添加的底部按钮 -->
                <li class="uside"><router-link  tag="span" to="/help_center">{{$t('public.ft.help')}}</router-link></li>
              </ul>
            </div>
          </div>
          <div class="links">
            <b class="b">{{$t('myAdd.footItem.cooperation')}}</b>
            <a class="logo" href="https://ibhinvestmentbank.com/newsite/" target="_blank"><img class="logoImg" src="../../../static/static/addImg/link/ibh.png" alt="."></a>
          </div>
          <div class="links paddingBottom">
            <b class="b">{{$t('myAdd.footItem.link')}}</b>
            <a class="logo" href="https://www.btc123.com/" target="_blank"><img class="logoImg" src="https://s.zb.cn/statics/img/v3/links/BTC123.png " alt="."></a>
            <a class="logo" href="https://www.aicoin.com/" target="_blank"><img class="logoImg" src="https://s.zb.cn/statics/img/v3/links/AIcoin.png" alt="."></a>
            <a class="logo" href="https://www.fmz.com/" target="_blank"><img class="logoImg" src="https://s.zb.cn/statics/img/v3/links/BOTVS.png" alt="."></a>
            <a class="logo" href="https://www.feixiaohao.com/" target="_blank"><img class="logoImg" src="https://s.zb.cn/statics/img/v3/links/FEIXIAOHAO.png" alt="."></a>
            <a class="logo" href="https://mytoken.io/" target="_blank"><img class="logoImg" src="../../../static/static/addImg/link/moretoken.png" alt="."></a>
          </div>
        </div>
 </template>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'foot',
  data () {
    return {
      fotdata: '',
      logo: null,
      footerTemplate: null,
      configFooterOpen: null,
      chaindown: location.host.indexOf('chaindown'),
      otcOpen: null,
      coOpen: null,
      siteType: [],
      webSiteInfo: null,
      http: location.protocol + '//'
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    ...mapState({
      public_info ({baseData}) {
        if (baseData.isReady) {
          this.logo = baseData.logo
          this.configFooterOpen = baseData._data.config_footer_open
          this.footerTemplate = baseData.footerTemplate
          this.otcOpen = baseData.otcOpen
          this.coOpen = baseData.contractOpen
          this.siteType = baseData._siteType
          this.webSiteInfo = baseData._webSiteInfo
          return baseData
        } else {
          return false
        }
      }

    }),
    number () {
      if (this.$store.state.baseData._footer) {
        return this.$store.state.baseData._footer.number
      }
      return null
    },
    email () {
      if (this.$store.state.baseData._footer) {
        return this.$store.state.baseData._footer.email
      }
      return null
    },
    name () {
      if (this.$store.state.baseData._footer) {
        return this.$store.state.baseData._footer.name
      }
      return null
    }
  },
  watch: {
    '$store.state.baseData._lan' (val, old) {
      if (old) {
        this.getData()
      }
    }
  },
  methods: {
    getData () {
      this.axios({
        url: this.$store.state.url.common.footer,
        headers: {},
        params: {},
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.fotdata = data.data
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped >
  /*文章分类*/
  ul.footer_item_title{
    padding-top:0;
  }
  ul.footer_item_title li{
    height:20px !important;
    font-size:14px;
    color: rgba(255,255,255,.6);
  }
  /* 联系方式 */
  #footer-box .foot-min .foot-min-top .foot-min-right .email i.icon-letters {
    margin-right: 29px;
  }
  /*社交图标*/
  div.foot-right-btm ul li:nth-child(3){
    position:relative;
  }
  div.foot-right-btm ul li:nth-child(3):hover div.qrcode{
    height: 100px;
    bottom:40px;
  }
  div.foot-right-btm ul li:nth-child(3) div.qrcode{
    position:absolute;
    bottom: 40px;
    left: -30px;
    width: 100px;
    height: 0;
    transition:all 0.3s;
    overflow:hidden;
  }
  div.foot-right-btm ul li:nth-child(3) div.qrcode img{
    margin:0 !important;
    width: 100% !important;
    height: 100%;
  }
</style>

